<template>
    <div class="geeTable">
        <el-table ref="geeTable"
                  :data="geeTableData"
                  style="margin:0 auto;">
            <!--max-height="400px">-->
            <el-table-column
                    prop="id"
                    label=""
                    width="30"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="remarks"
                    label="任务名称"
                    width="fit-content"
                    align="center">
            </el-table-column>
            <el-table-column
                    label="进度"
                    width="140"
                    align="center">
                <template slot-scope="scope">
                    <el-progress
                            :percentage="scope.row.progress"
                            :status="scope.row.status">
                            <!--:percentage="scope.row.progress|toNumber"-->
                            <!--:status="scope.row.status"-->
                    </el-progress>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="100"
                    align="center">
                <template slot-scope="scope">
                    <el-button
                            title="结果预览"
                            :disabled="scope.row.chart"
                            @click="previewData(scope.$index, scope.row)"
                            type="text">
                        <i class="fa fa-table"></i>
                    </el-button>
                    <el-button
                            title="结果上图"
                            :disabled="scope.row.map"
                            @click="openDataResourceOnMap(scope.$index, scope.row)"
                            type="text">
                        <i class="fa fa-globe"></i>
                    </el-button>
                    <el-button
                            title="结果下载"
                            :disabled="scope.row.download"
                            icon="el-icon-download"
                            @click="download(scope.$index, scope.row)"
                            type="text">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name: "geeTable",
        props:{
            tableData:String,
            dagId:Array,
        },
        data(){
          return{
              geeTableData:[],
          }
        },
        methods:{
            download(index, rows) {
                //下载数据
                window.open(this.$serverUrl + '/wf/result/' + rows.dagId+'/download', 'blank');
                console.log(this.$serverUrl + '/wf/result/' + rows.dagId+'/download')
            },
            //加载所点击的数据到地图上
            openDataResourceOnMap(index, rows) {
                let that=this;
                let mapData = [];
                if(rows.dagId.indexOf("BKmeans")!==-1){
                    // this.$axios.get("/wf/result/preview/"+ rows.dagId + "/geojson").
                    // this.$axios.get("/parallel/result/preview/BKmeans1542708306820/geojson?offset=0&size=300").
                    // then(function (res) {
                    //     mapData = res.body;
                        // that.$emit('addGeeMap',mapData);
                    // }).catch(function (error) {
                    //     console.log(error)
                    // });
                    mapData="/parallel/result/preview/BKmeans1542708306820/geojson?offset=0&size=300";
                    this.$emit('addGeeMap',mapData)
                }
                else if(rows.dagId.indexOf("ODPair")!==-1){
                    // this.$axios.get("/parallel/result/preview/ODPairDetectionVehicle1542707948559/geojson?offset=0&size=300").
                    // then(function (res) {
                    //     mapData = res.body;
                    //     console.log(mapData);
                    //     that.$emit('addGeeMap',mapData);
                    // }).catch(function (error) {
                    //     console.log(error)
                    // });
                    mapData="/parallel/result/preview/ODPairDetectionVehicle1542707948559/geojson?offset=0&size=300";
                    this.$emit('addGeeMap',mapData)
                }
                else{
                }
            },
            // previewData(index, row) {
            //     this.$Bus.$emit("dataDialogParams", {
            //         title: row.remarks,
            //         visible: true,
            //         queryUrl: "/parallel/result/preview/"+ row.applicationId,
            //         queryParams: {
            //             offset: 0,
            //             size: 100//TODO:需要设置分页,注意offset要乘以size
            //         }
            //     });
            // },
            getTableData(data){
                let row={};
                debugger;
                row.id = this.dagId.length;
                row.remarks = data;
                // row.remarks = data[i];
                row.download = true;
                row.chart = true;
                row.map = true;
                this.geeTableData.push(row);

                let that=this;
                console.log(this.dagId);
                let superviseTimer = setInterval(function () {
                    debugger;
                    that.$axios.get('/wf/monitor/' + that.dagId[that.dagId.length - 1])
                        .then(function (response) {
                            if(response.code == 200){
                                for(let item of that.geeTableData){
                                    if(item.remarks === that.dagId[that.dagId.length - 1]){
                                        item.download = false;
                                        item.chart = false;
                                        item.map = false;
                                        item.progress = 100;
                                        item.status = "success";
                                        item.dagId = that.dagId[that.dagId.length - 1];
                                        clearInterval(superviseTimer);
                                    }
                                }
                            } else {
                                for(let item of that.geeTableData){
                                    item.download = true;
                                    item.chart = true;
                                    item.map = true;
                                    item.progress = 0;
                                    item.status = "exception";
                                    console.log(item.status)
                                }
                            }

                            // if (response.code == 200) {
                            //     if (response.body.dagRun !== null) {
                            //         if (response.body.dagRun.state === "success") {
                            //             clearInterval(superviseTimer);
                            //             row.download = false;
                            //             row.chart = false;
                            //             row.map = false;
                            //             row.progress = 100;
                            //             row.status = "success";
                            //             row.dagId = row.remarks;
                            //             // row.dagId = that.dagId;
                            //         }
                            //         else if (response.body.dagRun.state === "running") {
                            //             row.download = true;
                            //             row.chart = true;
                            //             row.map = true;
                            //             row.progress = 10;
                            //             row.status = "exception";
                            //         }
                            //         else {
                            //             row.download = true;
                            //             row.chart = true;
                            //             row.map = true;
                            //             row.progress = 0;
                            //             row.status = "exception";
                            //         }
                            //     }
                            //     else {
                            //         row.download = true;
                            //         row.chart = true;
                            //         row.map = true;
                            //         row.progress = 0;
                            //         row.status = "exception";
                            //         console.log(row.status)
                            //     }
                            // }
                        })
                }, 5000);
                // }
            },
        },
        watch:{
            tableData :function () {
                if(this.tableData!==""){
                    this.getTableData(this.tableData);
                }
            }
        }
    }
</script>

<style>
    .el-input--prefix .el-input__inner {
        border-radius: 20px;
    }

    .el-table td, .el-table th {
        background-color: #f8f8f9;
    }

    .el-table__empty-block {
        background-color: #f8f8f9;
    }

    .el-el-table-column {
        text-align: center;
    }
    #deletepro:hover{
        color:#fe6970;
    }
</style>